<!-- 用户管理 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="交易ID" prop="blurTransactionId">
          <el-input v-model="queryParams.blurTransactionId" placeholder="请输入交易ID" />
        </el-form-item>
        <el-form-item label="状态" prop="statusList">
          <enum-select
            v-model="queryParams.statusList"
            placeholder="请选择状态"
            multiple
            :enums="RECHARGE_STATUS_ENUM"
          ></enum-select>
        </el-form-item>
        <el-form-item label="充值时间">
          <el-date-picker
            v-model="tempTime"
            :editable="false"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSearch">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="flex flex-col h-full" body-style="height: calc(100% - 0px);">
      <BasePageTable
        :tableColumnsData="columns"
        :tableData="pageData"
        :total="total"
        :loading="loading"
        style="height: calc(100%)"
        @handleQuery="changePage"
      >
        <template #type="{ row }">
          <el-tag :type="row.type == TRANSACTION_TYPE_ENUM.RECHARGE.value ? 'success' : 'warning'">
            {{ getLabelByValue(TRANSACTION_TYPE_ENUM, row.type) }}
          </el-tag>
        </template>
        <template #status="{ row }">
          <el-tag :type="rechargeStatusMap[row.status] || 'primary'">
            {{ getLabelByValue(RECHARGE_STATUS_ENUM, row.status) }}
          </el-tag>
        </template>
        <template #payType="{ row }">
          {{ getLabelByValue(PAY_METHOD_ENUM, row.payType) }}
        </template>
        <template #operation="scope">
          <el-button
            type="danger"
            size="small"
            link
            icon="delete"
            :disabled="
              scope.row.status === RECHARGE_STATUS_ENUM.SUCCESS.value ||
              scope.row.status === RECHARGE_STATUS_ENUM.FAILED.value
            "
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </BasePageTable>
    </el-card>
    <recharge-form ref="rechargeFormRef" @load-data="handleQuery"></recharge-form>
  </div>
</template>

<script setup lang="ts">
import BasePageTable from "@/components/BasePageTable/index.vue";
import coinsAPI, { CoinsRechargeRecordQuery } from "@/api/coins/coins-api";
import {
  ENTER_TYPE_ENUM,
  PAY_METHOD_ENUM,
  RECHARGE_STATUS_ENUM,
  TRANSACTION_TYPE_ENUM,
} from "@/enums/conins/ConinsEnum";
import { getLabelByValue } from "@/utils/enums";
import RechargeForm from "@/views/coins/recharge/components/recharge-form.vue";
import EnumSelect from "@/components/EnumSelect/index.vue";
import router from "@/router";
const rechargeStatusMap = {
  [RECHARGE_STATUS_ENUM.INITIALIZED.value]: "info",
  [RECHARGE_STATUS_ENUM.SUCCESS.value]: "success",
  [RECHARGE_STATUS_ENUM.FAILED.value]: "danger",
};
const rechargeFormRef = ref();
const columns = ref<any[]>([
  {
    label: "交易ID",
    prop: "transactionId",
    width: 300,
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "类型",
    prop: "type",
    customSlot: "type",
    width: 200,
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "付款用户",
    prop: "terminalUser.nickname",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "公司名称",
    prop: "companyName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "支付方式",
    prop: "payType",
    customSlot: "payType",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "积分",
    prop: "coins",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "充值金额(元)",
    prop: "amount",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "充值状态",
    prop: "status",
    customSlot: "status",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "充值时间",
    prop: "rechargeTime",
    align: "center",
    width: 200,
    showOverflowTooltip: true,
  },
  {
    label: "备注",
    prop: "remark",
    align: "center",
    showOverflowTooltip: true,
  },
]);
const queryFormRef = ref();
const tempTime = ref();
const queryParams = reactive<CoinsRechargeRecordQuery>({
  pageNum: 1,
  pageSize: 10,
  statusList: [],
  beginTime: "",
  endTime: "",
  blurTransactionId: "",
});

const pageData = ref([]);
const total = ref(0);
const loading = ref(false);

function onSearch() {
  queryParams.pageNum = 1;
  handleQuery();
}

// 查询
async function handleQuery() {
  try {
    loading.value = true;
    const data = await coinsAPI.getPage(queryParams);
    pageData.value = data.list;
    total.value = data.total;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}
function changePage(val: any) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  handleQuery();
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.beginTime = "";
  queryParams.endTime = "";
  tempTime.value = "";
  handleQuery();
}

async function handleOpenDialog() {
  router.push({
    name: "recharge",
  });
}

// 删除部门
async function handleDelete(id) {
  const result = await ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  if (!result) return;
  try {
    loading.value = true;

    await coinsAPI.delete({
      id: id,
    });
    ElMessage.success("删除成功");
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}

function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.beginTime = startTime;
    queryParams.endTime = endTime;
  } else {
    queryParams.beginTime = "";
    queryParams.endTime = "";
  }
}

onMounted(() => {
  handleQuery();
});
</script>
